<!doctype html>
<html lang="en">
<head>
    @include('web.layout.head')
    <link rel="stylesheet" href="{{mix('/css/web/user/shop_design.css')}}">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

@include('web.layout.header')
@include('web.layout.user_tab')
<div class="base_member_content">
    <div class="w1200">
        @include('web.layout.seller_nav')
        <style>
            .banner_list img {
                max-width: 100%;
            }
        </style>
        <div class="nav_right flr">
            <div class="base_content">
                <div class="line_title">banner设置</div>
                <div class="my-subnav f-cb">
                    <ul>
                        <li>
                            <a href="{{asset('/member/seller/shop_design_templet')}}" class="jm_hover">
                                模板选择
                            </a><i></i>
                        </li>
                        <li class="cur">
                            <a href="{{asset('/member/seller/design')}}" class="jm_hover">
                                banner设置
                            </a><i></i>
                        </li>
                        <li>
                            <a href="{{asset('/member/seller/shop_design_custom')}}" class="jm_hover">
                                自定义分类
                            </a><i></i>
                        </li>
                    </ul>
                </div>
                <div class="tit_box">
                    <h2>请编辑商铺首页banner</h2>
                </div>
                <div class="banner_list fl">
                    <ul>
                        {{--@foreach($list as $key=>$value)--}}
                        {{--<li>--}}
                            {{--<div class="ts">建议尺寸：1920 * 420</div>--}}
                            {{--<div class="banner_top">--}}
                                {{--<h2>{{$value['screen_type_name']}}</h2>--}}
                                {{--<span class="btn_eidt fr" data-src="{{$value['banner_image']}}" data-linked="{{$value['banner_url']}}"  data-title="{{$value['banner_name']}}" data-id="{{$value['id']}}">编辑</span>--}}
                            {{--</div>--}}

                            {{--<img class="default_img" src="{{$value['banner_image']}}">--}}
                        {{--</li>--}}
                        {{--@endforeach--}}
                        @if(isset($first))
                        <li>
                            <div class="ts">建议尺寸：1920 * 420</div>
                            <div class="banner_top">
                                <h2>第一屏</h2>
                                <span class="btn_eidt fr" data-src="{{$first['banner_image']}}" data-id="{{$first['id']}}" data-linked="{{$first['banner_url']}}"  data-title="{{$first['banner_name']}}" data-type="1">编辑</span>
                            </div>

                            <img class="default_img" src="{{$first['banner_image']}}">
                            <img class="banner_del" src="{{asset('/img/web/user/renovation_del_img.png')}}" data-id="{{$first['id']}}" data-screen="{{$first['screen_type']}}">
                        </li>
                        @else
                            <li>
                                <div class="ts">建议尺寸：1920 * 420</div>
                                <div class="banner_top">
                                    <h2>第一屏</h2>
                                    <span class="btn_eidt fr" data-src="/img/web/user/default_img_logo.png" data-id="" data-linked=""  data-title="" data-type="1">编辑</span>
                                </div>
                                <img class="default_img" src="/img/web/user/default_img_logo.png" >
                            </li>
                        @endif
                        @if(isset($second))
                            <li>
                                <div class="ts">建议尺寸：1920 * 420</div>
                                <div class="banner_top">
                                    <h2>第二屏</h2>
                                    <span class="btn_eidt fr" data-src="{{$second['banner_image']}}" data-id="{{$second['id']}}" data-linked="{{$second['banner_url']}}"  data-title="{{$second['banner_name']}}" data-type="2">编辑</span>
                                </div>

                                <img class="default_img" src="{{$second['banner_image']}}">
                                <img class="banner_del" src="{{asset('/img/web/user/renovation_del_img.png')}}" data-id="{{$second['id']}}" data-screen="{{$second['screen_type']}}">
                            </li>
                        @else
                            <li>
                                <div class="ts">建议尺寸：1920 * 420</div>
                                <div class="banner_top">
                                    <h2>第二屏</h2>
                                    <span class="btn_eidt fr" data-src="/img/web/user/default_img_logo.png" data-id="" data-linked=""  data-title="" data-type="2">编辑</span>
                                </div>
                                <img class="default_img" src="/img/web/user/default_img_logo.png">
                            </li>
                        @endif
                        @if(isset($third))
                            <li>
                                <div class="ts">建议尺寸：1920 * 420</div>
                                <div class="banner_top">
                                    <h2>第三屏</h2>
                                    <span class="btn_eidt fr" data-src="{{$third['banner_image']}}" data-id="{{$third['id']}}" data-linked="{{$third['banner_url']}}"  data-title="{{$third['banner_name']}}" data-type="3">编辑</span>
                                </div>

                                <img class="default_img" src="{{$third['banner_image']}}">
                                <img class="banner_del" src="{{asset('/img/web/user/renovation_del_img.png')}}" data-id="{{$third['id']}}" data-screen="{{$third['screen_type']}}">
                            </li>
                        @else
                            <li>
                                <div class="ts">建议尺寸：1920 * 420</div>
                                <div class="banner_top">
                                    <h2>第三屏</h2>
                                    <span class="btn_eidt fr" data-src="/img/web/user/default_img_logo.png" data-id="" data-linked=""  data-title="" data-type="3">编辑</span>
                                </div>
                                <img class="default_img" src="/img/web/user/default_img_logo.png">
                            </li>
                        @endif
                    </ul>
                </div>
                <img class="default_img_logo" src="/img/web/user/default_img_logo.png" style="display: none">
            </div>
        </div>
    </div>
</div>
<div class="bg_h"></div>
<div class="banner_bombbox" >
    <div class="h_top"><h2>设置banner</h2><a class="close_box">×</a></div>
    <input type="hidden" name="screen_type">
    <input type="hidden" name="banner_id">

    <div class="fl shu_box mt30">
        <span>设置标题</span>
        <input type="text" name="banner_title" class="banner_title">
        <p class="jm_error"></p>
    </div>
    <div class="fl shu_box" style="position:relative;">
      <span>设置图片<!-- <div class="btn_uploadimg">浏览</div> --></span>
        <div class="banner_img_parent" style="display: inline-block;">
            <i class="banner_close">X</i>
            <img id="btn_uploadimg" src="{{asset('/img/web/user/default_img_logo.png')}}" >
            <img src="{{asset('/img/web/user/default_img_logo.png')}}" style="display: none" class="default_banner_img">
        </div>
        <input type="hidden" name="banner_img" class="banner_img">
        <p class="jm_error"></p>
    </div>
    <div class="fl shu_box">
        <span>设置链接</span>
        <input type="text" name="banner_link" class="banner_link">
        <p class="jm_ts">仅支持内部链接，即以ejing365.com为主域名的链接</p>
        <p class="jm_error"></p>
    </div>
    <div class="btn_box">
        <div class="btn_cancel close_box">取消</div>
        <div class="btn_confirm delivery_confirm">确定</div>
    </div>
</div>
<form id="uploadForm" action="{{url('uploads/images')}}" method="post">
    {{csrf_field()}}
    <input style="display: none;" name="image" type="file" class="inputFile" />
</form>
@include('web.layout.footer')
<script type="text/javascript">
$(function(){
    var _token = '{!! csrf_token() !!}';
    //编辑
    $('.btn_eidt').click(function(){
        var id = $(this).attr('data-id');
        var src = $(this).attr('data-src');
        var name = $(this).attr('data-title');
        var link = $(this).attr('data-linked');
        var type = $(this).attr('data-type');
        // input 赋值
        $("input[name=banner_id]").val(id);
        $("input[name=banner_title]").val(name);
        $("input[name=banner_link]").val(link);
        $("input[name=screen_type]").val(type);
        $("#btn_uploadimg").attr('src',src);
        if(src.indexOf('default_img_logo.png')==-1){
            $(".banner_close").css({"display":""})
        }else{
            $(".banner_close").css({"display":"none"})
        }

        $(".banner_img").val(src);
        $('.bg_h').show();
        $('.banner_bombbox').show();
    });
    $('.close_box').click(function(){
        // 清空值
        $("input[name=banner_id]").val('');
        $("input[name=banner_title]").val('');
        $("input[name=banner_link]").val('');
        $("input[name=screen_type]").val('');
        $(".banner_img").val('');
        $('.jm_error').html('');
        $('.bg_h').hide();
        $('.banner_bombbox').hide();
    });

    $('.delivery_confirm').click(function(){
        var id = $("input[name=banner_id]").val();
        var banner_title = $('.banner_title').val();
        $('.jm_error').html('');
        if($.trim(banner_title) == ''){
            $('.banner_title').parent().find('.jm_error').html('请输入设置标题');
            return false;
        }
        var banner_img = $('.banner_img').val();
        var default_img = '/img/web/user/default_img_logo.png';

        if($.trim(banner_img) == '' || banner_img == default_img ){
            $('.banner_img').parent().find('.jm_error').html('请选择需要设置的图片');
            return false;
        }
        var banner_link = $('.banner_link').val();
        if(banner_link.length>0 && banner_link.indexOf('ejing365.com')<0){
            $('.banner_link').parent().find('.jm_error').html('仅支持内部链接，即以ejing365.com为主域名的链接');
            return false;
        }
        var screen_type = $("input[name=screen_type]").val();

        var url='';
        var ajaxType = 'POST';
        if (id){
            url = '/member/seller/design/'+id;// update
            ajaxType = 'PUT';
        }else{
            url = '/member/seller/design';// create
            ajaxType = 'POST';
        }
//        debugger;
        $.ajax({
            url: url,
            type: ajaxType,
            data: {'id':id,'banner_name':banner_title,'banner_image':banner_img,'banner_url':banner_link,'screen_type':screen_type,'_token':_token},
            success: function (res) {
                if (res.code == 0){
                      layer.alert("保存成功", {
                          icon: 1
                      }, function () {
                          location.reload();
                      });
                } else {
                    layer.alert('保存失败', {
                        title:'提示',
                        icon: 2
                    });
                }
            },
            error: function () { }
        });
    });


    // 图片上传点击
    $('#btn_uploadimg').click(function () {
        $('.inputFile').trigger('click');
    });
    // 选择完要上传的文件后, 直接触发表单提交
    $('input[name=image]').on('change', function () {
        if ($.trim($(this).val())) {
            $("#uploadForm").trigger('submit');
        }
    });

    // 图片上传
    $("#uploadForm").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            url: "{{url('uploads/images')}}",
            type: "POST",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            // 显示加载图片
            success: function (res) {
                if (res.status == 0){
                    var img_path = '' + res.path;
                    $(".banner_img").val(res.path);
                    $("#btn_uploadimg").attr('src',res.path)
                } else {
                    layer.alert('图片上传失败', {
                        title:'提示',
                        icon: 2
                    });
                }
            },
            error: function () { }
        });
    });
    $(".banner_img_parent").on("mouseover",function(){
        if($("#btn_uploadimg").attr("src").indexOf('default_img_logo.png')==-1){
            $(".banner_close").css({"display":""})
        }else{
            $(".banner_close").css({"display":"none"})
        }
    })
    $("#btn_uploadimg").on("mouseout",function(){
        $(".banner_close").css({"display":"none"})
    })
    $('.banner_close').on('click',function(){
        $(".banner_img").val('');
        $(".banner_close").css({"display":"none"})
        $("#btn_uploadimg").attr('src',$('.default_banner_img').attr("src"))
    })
    $('.banner_del').on("click",function(){
        var self=$(this)
        var id=$(this).attr('data-id');
        var screen_type=$(this).attr('data-screen');
        if(id){
              layer.confirm('确认删除该banner图?', {icon: 3, title:'提示'}, function(index){
                  layer.close(index);
                  $.ajax({
                        url: '/member/seller/design/'+id,
                        type: 'delete',
                        dataType: 'json',
                        data: {'_token':"{{csrf_token()}}",'id':id ,'screen_type':screen_type},
                        success: function (data) {
                            console.log(data);
                            if (0 == data.code) {
                                layer.alert("删除成功", {
                                    icon: 1
                                }, function (del) {
                                    //location.reload();
                                     self.prev('img').attr('src',$('.default_img_logo').attr("src"))
                                     self.remove();
                                     layer.close(del);
                                     location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                  });
            });
        }
    })
})
</script>
</body>
</html>